<template>
  <div class="total-sales">
    <common-card title="累计订单量" value="2,175,420">
      <template>
        <diV
          id="total-orders-chart"
          :style="{ width: '100%', height: '100%' }"
        ></diV>
      </template>
      <template slot="footer">
        <span>昨日订单量</span>
        <span class="emphasis">2,000,000</span>
      </template>
    </common-card>
  </div>
</template>

<script>
import CommonCard from '@/components/CommonCard/Index.vue'
export default {
  components: {
    CommonCard
  },
  mounted() {
    const chartsDom = document.getElementById('total-orders-chart')
    const chart = this.$echarts.init(chartsDom)
    chart.setOption({
      xAxis: {
        type: 'category',
        show: false,
        boundaryGap: false
      },
      yAxis: {
        show: false
      },
      series: [
        {
          type: 'line',
          data: [
            620, 432, 220, 534, 790, 430, 220, 320, 532, 320, 834, 690, 530,
            220, 620
          ],
          smooth: true,
          areaStyle: {
            color: 'purple'
            // color: this.$echarts.graphic.LinearGradient(0, 1, 0, 0, [
            //   {
            //     offset: 0.4,
            //     color: '#010C17'
            //   },
            //   {
            //     offset: 1,
            //     color: '#44E2F0'
            //   }
            // ])
          },
          itemStyle: {
            opacity: 0
          },
          lineStyle: {
            width: 0
          },
          symbol: 'none'
        }
      ],
      grid: {
        top: 0,
        bottom: 0,
        left: 0,
        right: 0
      }
    })
  }
}
</script>

<style>
</style>
